<template>
	<view class="container">
		<u-skeleton rows="8" :loading="false" :title="false"  :rowsWidth="[690,690,690,690,690,690,690]" :rowsHeight="[20,60,20,60,20,60,20,60]">
		<view class="list">
			<view class="everArticle" v-for="(item, index) in list" :key="index" @click="openThisArticle(item.id)">
				<view class="main">
					<view class="title">
						{{item.title}}
					</view>
					<view class="introduce">
						{{item.intro}}
					</view>
				</view>
				
				<view class="cover">
					<image :src="item.cover" mode="aspectFill"></image>
				</view>
				
				<view class="time">
					{{item.time}}
				</view>
				
				<view class="interaction">
					<view class="like">
						<view class="t-icon t-icon-dianzan">
						</view>
						<view class="likeCount">
							{{item.likeCount}}
						</view>
					</view>
					
					<view class="comment" style="margin-left: 52upx;">
						<view class="t-icon t-icon-pinglun">
							
						</view>
						<view class="commentCount">
							{{item.comment}}
						</view>
					</view>
				</view>
			</view>
		</view>
		</u-skeleton>
	</view>
</template>

<script>
	//import marked from 'marked'
	import {mapState} from 'vuex'
	export default{
		data(){
			return {
				loading: false,
				page: 1,
			}
		},
		methods:{
			init(){
				if(this.$store.state.loginUser.articles.length == 0){
					uni.request({
						url:`http://162.14.102.246:8090/article/front/user/${this.$store.state.loginUser.userBaseInfo.id}/${this.page++}/8`,
						method:'GET',
						header:{
							xdzn_token:this.$store.state.loginUser.token
						}
					}).then(res => {
						console.log(res)
						if(res.data.code == 200){
							this.loading = false
							
						}
					})
				}
			},
			openThisArticle(id){
				uni.request({
					url:`http://162.14.102.246:8090/article/front/${id}`,
					method:'GET',
					header:{
						xdzn_token:this.$store.state.loginUser.token
					}
				})
				.then(res => {
					console.log(res)
					if(res.data.code == 200){
						let data = res.data.data.articleVO
						console.log('触发跳转')
						uni.navigateTo({
							url:'/pages/components/articleDetails?info='+encodeURIComponent(JSON.stringify(data))
						})
					}
				})
			}
		},
		computed:{
			...mapState({
				list: state => state.loginUser.articles
			})
		},
		mounted() {
			//this.init() 
		}
	}
</script>

<style scoped>
	.container{
		width: 100vw !important;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		overflow-y: auto;
		margin: 0 auto;
	}
	.list{
		display: flex;
		align-items: center;
		flex-direction: column;
	}
	.everArticle{
		width: 100%;
		height: 230upx;
		border-bottom: 1upx solid rgba(229, 229, 229, 1.0);
		padding-left: 50upx;
	}
	.main{
		width: 70%;
		height: 80%;
		top: 15upx;
		position: relative;
		display: flex;
		flex-direction: column;
	}
	.title{
		height: 30upx;
		width: 100%;
		font-weight: bold;
	}
	.introduce{
		height: calc(100% - 68upx);
		width: 100%;
		margin-top: 15upx;
		margin-left: 34upx;
		display: -webkit-box;
		word-wrap: break-all;
		word-break: normal;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		text-overflow: ellipsis;
		font-size: 0.85rem;
		overflow: hidden;
		color: rgba(122, 122, 122, 1.0);
	}
	.cover{
		position: relative;
		top: calc(-68% + 15upx);
		left: 77%;
		height: 130upx;
		width: 130upx;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: cyan;
	}
	.time{
		position: relative;
		color: rgba(122, 122, 122, 1.0);
		bottom: calc(68% - 20upx);
		font-size: 0.8rem;
	}
	.interaction{
		position: relative;
		display: flex;
		width: 100upx;
		flex-direction: row;
		top: -72%;
		left: 75%;
	}
	.like, .comment{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
	}
	.commentCount, .likeCount{
		font-size: 0.6rem;
		color: rgba(122, 122, 122, 1.0);
	}
</style>